---
title: Radio Group
description: A group of selectable buttons, commonly referred to as radio buttons, wherein only one button can be checked simultaneously.
---

{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import Code from '@/components/Code.astro';
import { LinkButton } from '@/components/react/LinkButton';
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
import importedCode from '@rnr/reusables/components/ui/radio-group?raw';

<LinkButton href='https://rn-primitives.vercel.app/radio-group'>Radio Group Primitive</LinkButton>
<LinkButton target='_blank' href='https://rnr-showcase.vercel.app/radio-group'>
  Demo
</LinkButton>

<br />

A group of selectable buttons, commonly referred to as radio buttons, wherein only one button can be checked simultaneously.

### Installation

<Tabs>
  <TabItem label='CLI'> 
    ```bash
    npx @react-native-reusables/cli@latest add radio-group
    ```
  </TabItem>
  <TabItem label='Manual'>
    <Aside type='tip' title='Dependencies'>
      Before copy/pasting, add the <a href='https://rn-primitives.vercel.app/radio-group' className='text-white font-bold'> radio group primitive</a> to your project.
    </Aside>

    <br />

    **Copy/paste the following code to `~/components/ui/radio-group.tsx`:**

    <Code code={importedCode} lang='tsx' title='~/components/ui/radio-group.tsx' />
  </TabItem>
</Tabs>


### Usage

```tsx
import * as React from 'react';
import { View } from 'react-native';
import { Label } from '~/components/ui/label';
import { RadioGroup, RadioGroupItem } from '~/components/ui/radio-group';

function Example() {
  const [value, setValue] = React.useState('Comfortable');

  function onLabelPress(label: string) {
    return () => {
      setValue(label);
    };
  }
  return (
    <View className='flex-1 justify-center items-center p-6'>
      <RadioGroup value={value} onValueChange={setValue} className='gap-3'>
        <RadioGroupItemWithLabel value='Default' onLabelPress={onLabelPress('Default')} />
        <RadioGroupItemWithLabel value='Comfortable' onLabelPress={onLabelPress('Comfortable')} />
        <RadioGroupItemWithLabel value='Compact' onLabelPress={onLabelPress('Compact')} />
      </RadioGroup>
    </View>
  );
}

function RadioGroupItemWithLabel({
  value,
  onLabelPress,
}: {
  value: string;
  onLabelPress: () => void;
}) {
  return (
    <View className={'flex-row gap-2 items-center'}>
      <RadioGroupItem aria-labelledby={`label-for-${value}`} value={value} />
      <Label nativeID={`label-for-${value}`} onPress={onLabelPress}>
        {value}
      </Label>
    </View>
  );
}
```

## Props

### RadioGroup

Extends [`View`](https://reactnative.dev/docs/view#props) props

|     Prop      |                 Type                 |     Note     |
| :-----------: | :----------------------------------: | :----------: |
|     value     |         string \| undefined          |              |
| onValueChange |        (val: string) => void         |              |
|    asChild    |               boolean                | _(optional)_ |
|   disabled    |               boolean                | _(optional)_ |

### RadioGroupItem

Extends [`Pressable`](https://reactnative.dev/docs/pressable#props) props

|  Prop   |  Type   |     Note     |
| :-----: | :-----: | :----------: |
| value | string |  |
| aria-labelledby | string | Its label's `nativeID`|
| asChild | boolean | _(optional)_ |